<template>
    <div>
        <h3>{{str}}</h3>
        <h3>{{username}}</h3>
        <button @click="fun">按钮</button>
        <ul>
            <li v-for="(item, index) in this.globalList" :key="index">{{ item.title }}</li>
        </ul>
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default ({
    name:'map',
    data () {
        return{
            // str:this.$store.state.str
        }
    },
    created(){
         console.log(this.$store.getters.filterArr)
    },
    computed:{
        ...mapState ({//划分模块的形式
            'str': state => state.str,
            'username':state => state.user.username,
            'globalList':state => state.globalList,
        }),
        // ...mapState(['str'])
        
    },
    methods:{
        ...mapActions(['action1']),//因为是方法 所以在方法内调用
        //应用方法在方法内可以直接使用这个方法 可以不用再引入commit的方法了
        ...mapMutations({
            'userSetName':'user/setName',
            'setName':'setName'
        }),
        ...mapGetters(['filterArr']),//应用方法在方法内可以直接使用这个方法 可以不用再引入commit的方法了
        fun(){
            // this.$store.commit('setName','newStr')
            this.setName('ppp')
            this.userSetName('//')
            this.action1(this.globalList,)
            this.filterArr(this.globalList,)
            // console.log('globalList',this.globalList)
            // console.log('this.filterArr',this.filterArr)
        }
    },
    
})
</script>

